<script setup>
import { useI18n } from 'vue-i18n'
import { useRouter } from 'vue-router'
import { NIcon, NEllipsis, NSwitch, NSelect } from 'naive-ui'
import serachInput from '@/components/searchInput/serachInput.vue'
import editIcon from '@/components/iconSvg/editIcon.vue'

const { t } = useI18n()
const router = useRouter()

const data = Array.from({ length: 46 }).map((_, index) => ({
  name: `Edward King ${index}`,
  age: 32,
  customName: 'aaaaa',
  address: `London, Park Lane noLondon, Park Lane noLondon, Park Lane noLondon, Park Lane noLondon, Park Lane noLondon, Park Lane noLondon, Park Lane no. ${index}`
}))

const goDetail = (row) => {
  router.push({
    path: '/home/device/deviceDetail'
  })
}

const levelOptions = [
  {
    label: t('alarm.urgency'),
    value: 1,
    style: {
      color: 'red'
    }
  },
  {
    label: t('alarm.importance'),
    value: 2,
    style: {
      color: '#fe7300'
    }
  },
  {
    label: t('alarm.secondary'),
    value: 3,
    style: {
      color: 'green'
    }
  },
  {
    label: t('alarm.general'),
    value: 4
  }
]

const renderTag = ({ option }) => {
  return h(
    'div',
    {
      style: {
        color:
          option.value == 1
            ? 'red'
            : option.value == 2
              ? '#fe7300'
              : option.value == 3
                ? 'green'
                : ''
      }
    },
    { default: () => option.label }
  )
}

const columns = computed(() => {
  return [
    {
      title: 'ID',
      key: 'name',
      fixed: 'left'
    },
    {
      title: t('system.type'),
      key: 'name'
    },
    {
      title: t('service.operationUser'),
      key: 'customName'
    },
    {
      title: t('system.createTime'),
      key: 'customName'
    },
    {
      title: t('service.result'),
      key: 'MAC'
    }
  ]
})

const checkedRowKeysRef = ref([])
const handleCheck = (rowKeys) => {
  checkedRowKeysRef.value = rowKeys
}

const valueChange = (keyword) => {
  console.log(keyword)
}

const deleteHandle = () => {
  console.log('点击了删除')
}

const remarkRef = ref(null)

const openRemark = () => {
  remarkRef?.value?.openPopup()
}

const customNameRef = ref(null)
const openCustomNameRemark = () => {
  customNameRef?.value?.openPopup()
}
</script>

<template>
  <div class="px-4">
    <div class="flex justify-end items-center mb-4 flex-wrap">
      <n-button class="ml-2">{{ t('system.download') }}</n-button>
    </div>
    <n-data-table
      :columns="columns"
      :data="data"
      :row-key="(row) => row.address"
      @update:checked-row-keys="handleCheck"
      :scroll-x="600"
      :pagination="{ pageSize: 5 }"
    />
  </div>
</template>

<style scoped></style>
